<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            min-width: 600px;
            margin: 0 auto;
        }
        .title{
            text-align: center;
        }
        .step-box{
            display: flex;
            flex-flow: row nowrap;
            /* justify-content: space-between; */
            margin: 10px 20px;
            overflow: hidden;
            font-size: 18px;
        }
        .step-box .step{
            position: relative;
        }
        .step-box .step:not(:last-child){
            flex-grow: 1;
            margin-right: 8px;
        }
        .step-box .step::after{
            content: "";
            display: block;
            border: 2px solid #ccc;
            position: absolute;
            top: 50%;
            left: 0px;
            width: 100%;
            z-index: -1;
            transform: translate(0px,-50%);
        }
        .step-box .no{
            color: #333;
            background-color: #ccc;
            font-size: 20px;
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            /* margin-right: 6px; */
        }
        .step-box .desc{
            background-color: white;
            padding: 0px 6px;
        }
        .step-box .step.doactive{
            color: #3838bd;
        }
        .step-box .step.doactive .no{
            background-color: #3838bd;
            color: white;
        }
        .step-box .step.doactive:after{
            border-color: #3838bd;
        }
        .step-box .step.active{
            color: #008000;
        }
        .step-box .step.active .no{
            background-color: #008000;
            color: white;
        }
        .step-box .step.active:after{
            border-color: #008000;
        }

        .content{
            width: 100%;
        }
        .content .item{
            box-shadow: 0 0 10px #666;
            border-radius: 8px;
            padding: 30px;
            box-sizing: border-box;
            margin: 20px 0px;
            text-align: center;
        }
        .content .item .form-item{
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        
        <div class="box">
            <h3 class="title">用户注册</h3>
            <div class="step-box">
                <!-- <div class="step" :class=" step>=1?'active':'' ">
                    <span class="no">1</span>
                    <span class="desc">账号密码</span>
                </div>
                <div class="step" :class=" step>=2?'active':'' ">
                    <span class="no">2</span>
                    <span class="desc">邮箱绑定</span>
                </div>
                <div class="step" :class=" step>=3?'active':'' ">
                    <span class="no">3</span>
                    <span class="desc">手机绑定</span>
                </div>
                <div class="step" :class=" step>=4?'active':'' ">
                    <span class="no">4</span>
                    <span class="desc">注册完成</span>
                </div> -->
                <div class="step" :class=" { active:step>1,doactive:step==1 } ">
                    <span class="no">1</span>
                    <span class="desc">账号密码</span>
                </div>
                <div class="step" :class=" { active:step>2,doactive:step==2 } ">
                    <span class="no">2</span>
                    <span class="desc">邮箱绑定</span>
                </div>
                <div class="step" :class=" { active:step>3,doactive:step==3 } ">
                    <span class="no">3</span>
                    <span class="desc">手机绑定</span>
                </div>
                <div class="step" :class=" { active:step>=4 } ">
                    <span class="no">4</span>
                    <span class="desc">注册完成</span>
                </div>
            </div>
            <div class="content">
                <div v-show=" step==1 " class="item">
                    <h5>账号密码</h5>
                    <div class="form-item">
                        <label>账号:</label>
                        <input type="text">
                    </div>
                    <div class="form-item">
                        <label>密码:</label>
                        <input type="text">
                    </div>
                    <div class="form-item">
                        <input type="button" value="下一步" @click="step=2">
                    </div>
                </div>
                <div v-show=" step==2 " class="item">
                    <h5>手机绑定</h5>
                    <div class="form-item">
                        <label>手机号码:</label>
                        <input type="text">
                    </div>
                    <div class="form-item">
                        <input type="button" value="上一步" @click="step=1">
                        <input type="button" value="下一步" @click="step=3">
                    </div>
                </div>
                <div v-show=" step==3 " class="item">
                    <h5>邮箱绑定</h5>
                    <div class="form-item">
                        <label>邮箱:</label>
                        <input type="text">
                    </div>
                    <div class="form-item">
                        <input type="button" value="上一步" @click="step=2">
                        <input type="button" value="下一步" @click="step=4">
                    </div>
                </div>
                <div v-show=" step==4 " class="item">
                    <h5>注册完成</h5>
                    <div class="form-item">
                        <input type="button" value="上一步" @click="step=3">
                        <input type="button" value="注册用户">
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    step:1
                }
            }
        }).mount("#app");
    </script>
</body>
</html>